<template>
  <div class="sysdictmanager">
    <page-search
      page-name="sysDict"
      :search-configs="searchConfiRef"
      @on-reset="handleRest"
      @on-query="handleQuery"
    />
    <page-content
      page-name="sysDict"
      :pageContentConfigs="contentConfigs"
      ref="pageContentRef"
      @on-add="handleAdd"
      @on-edit="handleEdit"
    />
    <page-modal page-name="sysDict" :model-configs="modalConfis" ref="pageModalRef" />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';

import contentConfigs from './configs/content';
import searchConfis from './configs/search';
import modalConfis from './configs/modal';

import usepageHook from '@/hooks/page-hook';
import usepageSelectHook from '@/hooks/page-select-hook';

const {
  pageSearch,
  pageContent,
  pageModal,
  handleQuery,
  handleRest,
  handleAdd,
  handleEdit,
  pageContentRef,
  pageModalRef
} = usepageHook();

const pageSelectList = usepageSelectHook('sysDict', 'typeList');

const searchConfiRef = computed(() => {
  const newSelectList = pageSelectList?.value.map((item: any) => ({
    label: item.typecode,
    value: item.typecode
  }));

  searchConfis.formItems.forEach((item) => {
    if (item.prop === 'typecode') {
      if (newSelectList.length >= item.options.length) item.options.push(...newSelectList);
    }
  });

  return searchConfis;
});
</script>

<style lang="less" scoped></style>
